<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: { type: String, default: 'chart' },
    width: { type: String, default: '100%' },
    height: { type: String, default: '350px' },
    autoResize: { type: Boolean, default: true },
    chartData: { type: Object, required: true },
    showType: { type: Boolean, default: false },
    title: { type: String, default: '' }
  },
  data() {
    return {
      chart: null,
      showChartData: { tradingDay: [], pnlToday: [], pnlHold: [], pnlTrade: [] },
      pnlAccuTotal: [],
      pnlAccuHold: [],
      pnlAccuTrade: []
    }
  },
  watch: {
    chartData: { deep: true, handler() { this.setOptions() } },
    showType: { deep: true, handler() { this.resetData() } }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart.on('click', (param) => {
        this.$emit('dayChartClick', param)
      })
      this.chart.on('datazoom', (param) => {
        if (!this.showType) {
          const length = this.showChartData.tradingDay.length
          if (length !== undefined && length > 0) {
            this.updateOptions(param.start, param.end, length)
          }
        }
      })
    },
    setOptions() {
      this.showChartData = JSON.parse(JSON.stringify(this.chartData))
      if (this.showChartData.tradingDay.length !== 0) {
        this.pnlAccuTotal[0] = this.showChartData.pnlToday[0]
        this.pnlAccuHold[0] = this.showChartData.pnlHold[0]
        this.pnlAccuTrade[0] = this.showChartData.pnlTrade[0]

        for (let i = 1; i < this.showChartData.tradingDay.length; i++) {
          this.pnlAccuTotal[i] = this.showChartData.pnlToday[i] + this.pnlAccuTotal[i - 1]
          this.pnlAccuHold[i] = this.showChartData.pnlHold[i] + this.pnlAccuHold[i - 1]
          this.pnlAccuTrade[i] = this.showChartData.pnlTrade[i] + this.pnlAccuTrade[i - 1]
        }
      }

      this.chart.setOption({
        title: { left: 'left', text: this.title },
        grid: { left: '2%', right: '2%', bottom: '3%', containLabel: true },
        tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, padding: [5, 10] },
        xAxis: { data: this.showChartData.tradingDay },
        yAxis: { axisTick: { show: false }},
        legend: { left: 'right', data: ['pnlToday', 'pnlHold', 'pnlTrade'] },
        series: [
          { name: 'pnlToday', smooth: true, type: 'line', data: this.showChartData.pnlToday },
          { name: 'pnlHold', smooth: true, type: 'line', data: this.showChartData.pnlHold },
          { name: 'pnlTrade', smooth: true, type: 'line', data: this.showChartData.pnlTrade }
        ],
        dataZoom: [
          { show: true, realtime: true, start: 0, end: 50 },
          { type: 'inside', realtime: true, start: 0, end: 50 }
        ]
      })
      this.chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 })
    },
    resetData() {
      this.showChartData = JSON.parse(JSON.stringify(this.chartData))
      this.chart.setOption({
        xAxis: [{ data: this.showChartData.tradingDay }],
        series: [
          { data: this.showChartData.pnlToday },
          { data: this.showChartData.pnlHold },
          { data: this.showChartData.pnlTrade }
        ],
        dataZoom: [
          { show: true, realtime: true, start: 0, end: 50 },
          { type: 'inside', realtime: true, start: 0, end: 50 }
        ]
      })
      this.chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 })
    },
    updateOptions(startPos, endPos, len) {
      const i = Math.floor(startPos / 100 * len)
      const j = Math.ceil(endPos / 100 * len)
      this.showChartData = JSON.parse(JSON.stringify(this.chartData))

      for (let m = i; m <= j; m++) {
        if (i === 0) {
          this.showChartData.pnlToday[m] = this.pnlAccuTotal[m]
          this.showChartData.pnlHold[m] = this.pnlAccuHold[m]
          this.showChartData.pnlTrade[m] = this.pnlAccuTrade[m]
        } else {
          this.showChartData.pnlToday[m] = this.pnlAccuTotal[m] - this.pnlAccuTotal[i - 1]
          this.showChartData.pnlHold[m] = this.pnlAccuHold[m] - this.pnlAccuHold[i - 1]
          this.showChartData.pnlTrade[m] = this.pnlAccuTrade[m] - this.pnlAccuTrade[i - 1]
        }
      }

      this.chart.setOption({
        xAxis: [{ data: this.showChartData.tradingDay }],
        series: [
          { data: this.showChartData.pnlToday },
          { data: this.showChartData.pnlHold },
          { data: this.showChartData.pnlTrade }
        ],
        dataZoom: [
          { show: true, realtime: true, start: startPos, end: endPos },
          { type: 'inside', realtime: true, start: startPos, end: endPos }
        ]
      })
    }
  }
}
</script>
